<template>
	<!--  树形结构质检记录-->
	<div class="content">
		<!--		<div class="pageSearchView">-->
		<!--			<el-form :inline="true" :model="searchParam" :rules="formRules" ref="searchForm" class="demo-form-inline">-->
		<!--				<el-form-item label="工单号">-->
		<!--					<el-input v-model="searchParam.reportWorkRecordNo" placeholder="请输入工单号" clearable-->
		<!--						style="width: 200px" />-->
		<!--				</el-form-item>-->

		<!--				<el-form-item>-->
		<!--					<el-button type="primary" :icon="Search" @click="submitForm()">查询</el-button>-->
		<!--					<el-button class="refreshBtn" :icon="Refresh" @click="resetSearch()">重置</el-button>-->
		<!--				</el-form-item>-->
		<!--			</el-form>-->
		<!--		</div>-->
		<div class="pageTableView">
			<div class="pageView_left">
				<div class="pageTableMenuView">
					<div class="pageTableTitle">列表信息</div>
				</div>
				<el-tree node-key="id" :data="treeQualityData" :props="defaultProps" @node-click="handleNodeClick"
								 :expand-on-click-node="false" :highlight-current="true" ref="tree">
					<template #default="{ node, data }">
						<div class="custom-tree-node"> <span
							:class="data.id == currentNodeKey ? 'is-penultimate' : ''">{{
								data.ordName }}</span></div>
					</template>
				</el-tree>
			</div>
			<div class="pageView_right">

				<div class="pageTableMenuView">
					<div class="pageTableTitle">列表信息</div>
				</div>
				<!-- 表格 -->
				<el-table class="pageTableClass" :data="paginatedData" border height="calc(100vh - 320px)">

					<el-table-column prop="no" label="单号" align="center" min-width="200" />
					<el-table-column prop="sourceNo" label="来源单号" align="center" min-width="200" />
					<el-table-column prop="qualityType" label="质检类型" align="center" min-width="200">
						<template #default="scope">
							<span> {{ getQualityTypeByValue(scope.row.qualityType) }} </span></template>
					</el-table-column>
					<el-table-column prop="createTime" label="创建时间" align="center" min-width="200" />
				</el-table>
				<!-- <div class="pagePagination">
		  <el-pagination background v-model:current-page="pageSearch.current" v-model:page-size="pageSearch.pageSize"
			:page-sizes="[10, 20, 50, 100, 200, 500]" layout="total, sizes, prev, pager, next" :total="pageTotal"
			@size-change="handleSizeChange" @current-change="handleCurrentChange" />
		</div> -->

			</div>
		</div>

	</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue';
import { ElMessage, ElForm } from 'element-plus';
import axiosInstance from '@/utils/http/api';
import { Delete, Edit, Plus, Refresh, Search } from '@element-plus/icons-vue';
import dayjs from 'dayjs';

onMounted(() => {
	getList();

});

const searchForm = ref<InstanceType<typeof ElForm>>();

const pageSearch = ref({
	// current: 1,
	// pageSize: 10
});

const pageTotal = ref(null); // 页面总数
const searchParam = ref({});
const paginatedData = ref([]);
const treeQualityData = ref([]);
const currentNodeKey = ref('');
const defaultProps = {
	children: 'children',
	label: 'productCode',
	disabled: 'disabled'
};
const formRules = ref({
	organizationId: [{ required: true, message: '请选择工厂/车间', trigger: 'change' }],
	equipmentIds: [{ required: true, message: '请选择设备', trigger: 'change' }]
});
// 判断质检类型
const getQualityTypeByValue = (e) => {
	let name = null;
	for (const item of qualityTypeList) {
		if (e == item.value) {
			name = item.label;
		}
	}
	return name;
};

// 质检类型
const qualityTypeList = reactive([
	{
		label: '首件检',
		value: '1',
		type: 'procedure'
	},
	{
		label: '末件检',
		value: '2',
		type: 'procedure'
	},
	{
		label: '生产',
		value: '3',
		type: 'procedure'
	},
	{
		label: '巡检',
		value: '4',
		type: 'procedure'
	},
	{
		label: '入库检',
		value: '5',
		type: 'material'
	},
	{
		label: '出库检',
		value: '6',
		type: 'material'
	},
	{
		label: '来料检',
		value: '7',
		type: 'material'
	}
]);
const handleNodeClick = (data, node) => {
	if (data.types === 4) {
		currentNodeKey.value = data.id;
		paginatedData.value = data.qualitySchemes;

	}

};

const processTree = (node) => {
	return node.map(item => {
		return {
			...item,
			ordName: item.productName,
			types: 1,
			children: processChildren(item.planOrderList, 1)
		};
	});
};

const processChildren = (nodes, type) => {
	if (type === 1) {
		return nodes?.map(node => {
			const children = node.children || [];
			return {
				...children[0],
				ordName: node.planNo,
				types: 2,
				children: processChildren(children[0].children || [], 2)
			};
		});
	} else if (type === 2) {
		return nodes?.map(node => {
			const children = node.children || [];
			return {
				types: 3,
				ordName: node.no,
				...node,
				children: children.map(child => ({
					types: 4,
					ordName: child.workNo,
					...child
				}))
			};
		});
	}
};

// 获取列表接口
const getList = () => {
	axiosInstance.post('/api/qualitySchemeTask/treeQualitySchemeTask', {
		...searchParam.value,
		...pageSearch.value
	})
		.then(res => {
			if (res.code !== 200) {
				ElMessage.error(res.message);
				return false;
			}
			treeQualityData.value = processTree(res.data);

			pageTotal.value = res.data.total;
		});
};


// 重置搜索条件
const resetSearch = () => {
	searchForm.value.clearValidate();


};
</script>
<style scoped>
.pageTableView {
	width: 100%;
	height: 100%;
	display: flex;
	background: #fff;

}

.pageView_left {
	width: 20%;
	overflow: auto;
}

.pageTableView ::-webkit-scrollbar {
	width: 3px;
	/* 滚动条宽度 */
}

.date-cell::-webkit-scrollbar-track {
	background: transparent;
	/* 滚动条轨道背景色 */
}

.pageView_right {
	width: 80%;
	height: 100%;
}

.is-penultimate {
	color: #626aef;
	font-weight: 700;
}
</style>